<template>
    <page-layout>
        <template v-slot:header>
            <el-button size="small" @click="backEvt">返回</el-button>
        </template>
        <el-form :model="sample" size="small" label-width="100px" inline>
            <el-row>
                <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
                    <el-form-item label="药品名字">
                        <el-input v-model="sample.name" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
                    <el-form-item label="品牌">
                        <el-input v-model="sample.brand" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
                    <el-form-item label="药品类型">
                        <el-input v-model="sample.type" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
                    <el-form-item label="计量单位">
                        <el-input v-model="sample.unit" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
                    <el-form-item label="品级">
                        <el-input v-model="sample.level" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="产地">
                        <el-input v-model="sample.place" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
                    <el-form-item label="上架时间">
                        <el-input v-model="sample.sale_stime" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
                    <el-form-item label="下架时间">
                        <el-input v-model="sample.sale_etime" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="详情图" style="width:100%">
                        <div v-for="it in sample.detail" class="imgBox">
                            <img :src="imgUrl + it">
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="轮播图" style="width:100%">
                        <div v-for="it in sample.banner" class="imgBox">
                            <img :src="imgUrl + it">
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="备注">
                        <el-input v-model="sample.remark" type="textarea" readonly></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>
    </page-layout>
</template>

<script>
import { IMGURL } from '../../../../config/sample.conf'
export default {
    data() {
        return {
            sample: {
                "id": "",
                "name": "",
                "product_id": "",
                "product_name": "",
                "sale_stime": "",
                "sale_etime": "",
                "type": "",
                "unit": "",
                "level": "",
                "place": "",
                "brand": "",
                "detail": [],
                "banner": [],
                "remark": ""
            },
            imgUrl: IMGURL
        }
    },
    mounted() {
        this.sample = this.$route.query
        this.sample.sale_stime = this.sample.sale_stime ? this.sample.sale_stime.slice(0, 10) : ''
        this.sample.sale_etime = this.sample.sale_etime ? this.sample.sale_etime.slice(0, 10) : ''
        this.sample.banner = this.sample.banner ? this.sample.banner.split('--') : ''
        this.sample.detail = this.sample.detail ? this.sample.detail.split('--') : ''
        console.log(this.sample)
    },
    methods: {
        backEvt() {
            this.$router.back()
        }
    }

}
</script>

<style lang="less" scoped>
.imgBox {
    width: 256px;
    height: 256px;
    display: inline-block;
    margin: 6px 12px;

    img {
        max-width: 100%;
        max-height: 100%;
    }
}
</style>
